<template>
  <div class="test-account-info">
    <div class="test-account-content">
      <div class="account-item" @click="handleUsernameClick">
        <div class="account-icon">
          <el-icon><User /></el-icon>
        </div>
        <div class="account-details">
          <span class="account-label">工号</span>
          <span class="account-value">{{ username }}</span>
        </div>
        <div class="copy-indicator">
          <el-icon><CopyDocument /></el-icon>
        </div>
      </div>

      <div class="account-item" @click="handlePasswordClick">
        <div class="account-icon">
          <el-icon><Lock /></el-icon>
        </div>
        <div class="account-details">
          <span class="account-label">密码</span>
          <span class="account-value">{{ maskedPassword }}</span>
        </div>
        <div class="copy-indicator">
          <el-icon><CopyDocument /></el-icon>
        </div>
      </div>

      <div class="security-notice">
        <el-icon class="notice-icon"><InfoFilled /></el-icon>
        <span>{{ securityNotice }}</span>
      </div>
    </div>

    <!-- 复制成功提示 -->
    <Transition name="fade-slide" appear>
      <div v-if="copied" class="copy-feedback">
        <el-icon><Check /></el-icon>
        已复制到剪贴板
      </div>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { User, Lock, CopyDocument, InfoFilled, Check } from '@element-plus/icons-vue'
import { createRipple } from '@/utils/animations'

// TypeScript接口定义
interface TestAccountInfoProps {
  username?: string
  password?: string
  securityNotice?: string
  autoFill?: boolean
}

// Props定义
const props = withDefaults(defineProps<TestAccountInfoProps>(), {
  username: 'admin',
  password: 'admin123',
  securityNotice: '点击账号信息可快速填充 · 安全提示：请在生产环境中修改默认密码',
  autoFill: true
})

// Emits定义
const emit = defineEmits<{
  fill: [field: 'username' | 'password', value: string]
}>()

// 响应式状态
const copied = ref(false)
const showPassword = ref(false)
const copyTimer = ref<NodeJS.Timeout>()

// 计算属性
const maskedPassword = computed(() => {
  return showPassword.value ? props.password : '•'.repeat(props.password.length)
})

// 事件处理函数
const copyToClipboard = async (text: string): Promise<boolean> => {
  try {
    await navigator.clipboard.writeText(text)
    return true
  } catch (error) {
    // 降级方案
    const textArea = document.createElement('textarea')
    textArea.value = text
    document.body.appendChild(textArea)
    textArea.select()

    try {
      document.execCommand('copy')
      document.body.removeChild(textArea)
      return true
    } catch (fallbackError) {
      document.body.removeChild(textArea)
      return false
    }
  }
}

const showCopyFeedback = () => {
  copied.value = true

  // 清除之前的定时器
  if (copyTimer.value) {
    clearTimeout(copyTimer.value)
  }

  // 设置新的定时器
  copyTimer.value = setTimeout(() => {
    copied.value = false
  }, 2000)
}

const handleUsernameClick = async (event: MouseEvent) => {
  // 创建涟漪效果
  const target = event.currentTarget as HTMLElement
  createRipple(target, event)

  // 复制到剪贴板
  const success = await copyToClipboard(props.username)

  if (success) {
    showCopyFeedback()

    // 如果启用自动填充，通知父组件
    if (props.autoFill) {
      emit('fill', 'username', props.username)
    }
  } else {
    ElMessage.error('复制失败')
  }
}

const handlePasswordClick = async (event: MouseEvent) => {
  // 创建涟漪效果
  const target = event.currentTarget as HTMLElement
  createRipple(target, event)

  // 复制到剪贴板
  const success = await copyToClipboard(props.password)

  if (success) {
    showCopyFeedback()

    // 如果启用自动填充，通知父组件
    if (props.autoFill) {
      emit('fill', 'password', props.password)
    }
  } else {
    ElMessage.error('复制失败')
  }
}

const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}

// 组件卸载时清理定时器
import { onUnmounted } from 'vue'
onUnmounted(() => {
  if (copyTimer.value) {
    clearTimeout(copyTimer.value)
  }
})
</script>

<style scoped>
.test-account-info {
  position: relative;
}

.test-account-content {
  display: flex;
  flex-direction: column;
  gap: var(--aperture-space-3);
}

.account-item {
  display: flex;
  align-items: center;
  gap: var(--aperture-space-3);
  padding: var(--aperture-space-3);
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--aperture-border-light);
  border-radius: var(--aperture-radius-base);
  cursor: pointer;
  transition: all var(--aperture-duration-normal) var(--aperture-ease-out);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(5px);
}

.account-item:hover {
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--aperture-primary);
  transform: translateX(4px) scale(1.02);
  box-shadow: var(--aperture-shadow-medium);
}

.account-item:active {
  transform: translateX(2px) scale(1.01);
}

.account-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--aperture-primary);
  color: white;
  border-radius: var(--aperture-radius-sm);
  font-size: 16px;
  flex-shrink: 0;
}

.account-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--aperture-space-1);
  min-width: 0;
}

.account-label {
  font-size: var(--aperture-text-xs);
  color: var(--aperture-text-tertiary);
  font-weight: var(--aperture-font-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.account-value {
  font-size: var(--aperture-text-sm);
  color: var(--aperture-text-primary);
  font-weight: var(--aperture-font-medium);
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copy-indicator {
  color: var(--aperture-text-tertiary);
  opacity: 0;
  transform: translateX(-8px);
  transition: all var(--aperture-duration-fast) var(--aperture-ease-out);
}

.account-item:hover .copy-indicator {
  opacity: 1;
  transform: translateX(0);
}

.security-notice {
  display: flex;
  align-items: center;
  gap: var(--aperture-space-2);
  padding: var(--aperture-space-3);
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.2);
  border-radius: var(--aperture-radius-sm);
  margin-top: var(--aperture-space-2);
}

.notice-icon {
  color: #FFC107;
  font-size: 14px;
  flex-shrink: 0;
}

.security-notice span {
  font-size: var(--aperture-text-xs);
  color: var(--aperture-text-secondary);
  line-height: var(--aperture-leading-normal);
}

/* 复制反馈提示 */
.copy-feedback {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--aperture-space-1);
  padding: var(--aperture-space-2) var(--aperture-space-3);
  background: var(--aperture-success);
  color: white;
  border-radius: var(--aperture-radius-sm);
  font-size: var(--aperture-text-xs);
  font-weight: var(--aperture-font-medium);
  white-space: nowrap;
  box-shadow: var(--aperture-shadow-medium);
  z-index: 1000;
}

.copy-feedback .el-icon {
  font-size: 12px;
}

/* 过渡动画 */
.fade-slide-enter-active,
.fade-slide-leave-active {
  transition: all var(--aperture-duration-fast) var(--aperture-ease-out);
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
}

.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .account-item {
    background: rgba(60, 60, 60, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .account-item:hover {
    background: rgba(80, 80, 80, 0.8);
    border-color: var(--aperture-primary);
  }

  .security-notice {
    background: rgba(255, 193, 7, 0.05);
    border-color: rgba(255, 193, 7, 0.1);
  }

  .security-notice span {
    color: var(--aperture-text-tertiary);
  }
}

/* 响应式设计 */
@media (max-width: 480px) {
  .account-item {
    padding: var(--aperture-space-2);
  }

  .account-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .account-value {
    font-size: var(--aperture-text-xs);
  }

  .security-notice {
    padding: var(--aperture-space-2);
  }

  .security-notice span {
    font-size: 10px;
  }
}
</style>